<template>
    <div>
        <h1 class="rizhi mm">查看日志</h1>
<!-- ------------------------------------------------------------- -->
        <div class="rizhi ">
          <el-select v-model="value" placeholder="请选择">
         <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
         </el-option>
        </el-select>
        <el-input v-model="input" placeholder="请输入内容" class="in"></el-input>
        <el-button @click="reset" class="btn" round>重置</el-button>
         <el-button type="primary" class="btn" round @click="open" >查询</el-button>
         <el-button type="primary" class="btn2" round @click="open2" >全部查询</el-button>
        </div>
<!-- ------------------------------------------------------------- -->      
         <clock :time="time" id="clock"></clock>
        <div id="time">
          <span>{{year}}年{{month}}月{{date}}日 星期{{day}} {{time}}</span>
        </div>
<!-- ------------------------------------------------------------- -->
 <div class="tab">
      <el-table :data="currentData" border style="width: 97%;margin-left:3%">
        <el-table-column prop="id" label="编号" ></el-table-column>
        <el-table-column prop="content" label="接口名" ></el-table-column>
        <el-table-column prop="admin" label="操作人员" ></el-table-column>
        <el-table-column prop="adminId" label="操作人员ID" ></el-table-column>
        <el-table-column prop="operation" label="操作内容" ></el-table-column>
        <el-table-column prop="createDate" label="操作时间"  ></el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!-- ------------------------------------------------------------- -->
<div class="block">
      <!-- 
            background---设置背景颜色
            hide-on-single-page---只有一页时隐藏分页
            :total---总数据数量
            :page-size---每页显示数据的条数
            :pager-count---最大可见页码数
            @current-change---currentPage改变时会触发(会自动获得页码)
            :current-page---当前页
      -->
      <el-pagination
        background
        hide-on-single-page
        layout="prev, pager, next"
        :total="this.pageNum"
        :page-size="this.pageSize"
        :pager-count="this.pageCount"
        @current-change="changePage"
        :current-page="currentPage"
        class="fen"
      ></el-pagination>
    </div>
<!-- ------------------------------------------------------------- -->
    </div>
    
</template>
<script>
import { mapActions } from "vuex";
import http from "../../http/http";
import Clock from 'vue-clock2';
const cityOptions = ['订单记录', '员工数据', '库存数据', '会员数据','支出数据'];
const days = ['一', '二', '三', '四', '五', '六', '天']; //-------------------------- 星期数组
let icnow = new Date();      //-------------------------- 初始化时间
let interval;                //-------------------------- 定义全局定时器，用于清除定时器
export default {
    name:'The_Log',
    components: { Clock },
    computed: { //--------------------------分页的计算属性
      currentData() {
        let start = (this.currentPage - 1) * this.pageSize;
        let end = this.currentPage * this.pageSize;
        return this.$store.state.ljnStore.tableData3.slice(start, end);
      },
      pageNum() {
        return this.$store.state.ljnStore.tableData3.length;
      },
    
  },
    methods:{
      ...mapActions(["getLogAll"]),
        open2(){    //--------------------------全部查询日志信息
            this.getLogAll()
        },
        reset(){ //-----------------------------------重置按钮
          this.value = ''
          this.input = ''
          this.$store.state.ljnStore.tableData3 = []
        },
// <!-- ------------------------------------------------------------- -->
         open() {   //条件查询日志信息
          let value = this.value
          let input = this.input
          // console.log(input);
          // console.log(value);
          if(value == '' || input == ''){
            this.$alert('您的选择为空，请重新选择', '提示消息', {
            confirmButtonText: '确定',
            callback: action => {
              this.$message({
                type: 'info',
                message: `您的选择为空，请重新选择`
              });
            }
          });
          }else{
          this.$confirm('此操作将查询日志信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '查询成功!'
          });
          console.log(value)
          console.log(input)
          http({               //--------------------------查询日志ajax
            url:'/mgrsite/SAdmin/OperationLog',
            method:'post',
            data:{
              "inputValue": input,
              "selectValue":value,
            }
          }).then(res =>{
            console.log(res)
            this.$store.state.ljnStore.tableData3 = res.data;
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消查询'
          });          
        });
          }
      },
      handleEdit(){

      },
      handleDelete(index,row){  //--------------------------删除日志按钮
        let id = row.id
        console.log(id)
        this.$confirm("你确定要删除此文件吗？","警告",{
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(
          http({
          url:'/mgrsite/SAdmin/deleteOperationLog',
          method:'post',
          data:{
            "ids":[id]
          }
        }).then(res =>{
          console.log(res)
          this.getLogAll()
        }).catch(err =>{
          console.log(err)
        })
        )
        
      },
      changePage(val) {
      this.currentPage = val;
    },
// <!-- ------------------------------------------------------------- -->
      setNowTimes(){       //--------------------------处理时间函数
            let myDate = new Date();
            this.nowTimes.yy = myDate.getMonth()+1;
            this.nowTimes.dd = String(myDate.getDate()<10?'0'+ myDate.getDate(): myDate.getDate()) ;
            this.nowTimes.hou = String(myDate.getHours()<10?"0"+myDate.getHours():myDate.getHours());
            this.nowTimes.min = String(myDate.getMinutes()<10?'0'+myDate.getMinutes():myDate.getMinutes());
            this.nowTimes.sec = String(myDate.getSeconds()<10?'0'+myDate.getSeconds():myDate.getSeconds());
        }
    },
// <!-- ------------------------------------------------------------- -->
    data() {
      return {
        currentPage: 1,
        pageSize: 5,
        pageCount: 7,
        formInline: {
            user: "",
            region: ""
        },
        options: [{
          value: '1',
          label: '员工编号'
        }, {
          value: '2',
          label: '员工姓名'
        },  ],
        value: '',
        year: icnow.getFullYear(),
        month: icnow.getMonth() + 1,
        date: icnow.getDate(),
        day: days[icnow.getDay() - 1],
        time: icnow.toTimeString().substring(0, 8),
        input:''
      }
    },
// <!-- ------------------------------------------------------------- -->
    beforeMount(){ //--------------------------时钟的函数
        interval = setInterval(() =>{
      let icnow = new Date();
        this.year = icnow.getFullYear();
        this.month = icnow.getMonth() + 1;
        this.date = icnow.getDate();
        this.day = days[icnow.getDay() - 1];
        this.time = icnow.toTimeString().substring(0, 8);
    }, 1000)
    },
// <!-- ------------------------------------------------------------- -->
     beforeDestroy () {
        clearInterval(interval);
    },
}
</script>

<style scoped lang="less">
    .tab {
      margin-top: 50px;
    }
    .fen {
      margin-top: 10px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
    .btn{
        margin-left: 15px;
        width: 100px;
    }
    #time{
    position: absolute;
    top: 26%;
    right: 20%;
    font-size: 20px;
    }
    #clock{
      position: absolute;
      top: 80px;
      left: 68%;
    }
    .mm{
      margin-top: 100px;
    }
    .rizhi{
      margin-left: 50px;
      // border: 1px solid red;
      .anniu{
        margin-top: 25px;
      }
    }
    .in{
      margin-left: 10px;
      width: 180px;
    }
</style>